<template>
  <div class="app-container">
    <!--    头部-->
    <div class="my-detail-header">
      <div>
        <span style="
    font-size: x-large;
    margin-right: 5px;
    font-weight: bolder;
    vertical-align: middle;"
        >{{ form.workOrderName }}</span>
        <span style="color: #606266">{{ form.workOrderCode }}</span>
      </div>
      <el-descriptions :column="4">
        <el-descriptions-item label="创建人">{{ form.createBy }}</el-descriptions-item>
        <el-descriptions-item label="创建时间">{{ form.createTime }}</el-descriptions-item>
      </el-descriptions>
    </div>


    <div class="my-detail-body">
      <el-tabs type="border-card">
        <el-tab-pane label="基础信息">
          <el-descriptions :column="2" :colon="false">
            <el-descriptions-item :labelStyle="descLabelStyle" label="工单编号">
              {{ form.scheduleCode }}
            </el-descriptions-item>
            <el-descriptions-item :labelStyle="descLabelStyle" label="工单名称">
              {{ form.scheduleName }}
            </el-descriptions-item>
            <el-descriptions-item :labelStyle="descLabelStyle" label="关联计划">
              <dict-tag :options="getScheduleSource" :value="form.scheduleSourceType" />
            </el-descriptions-item>
            <el-descriptions-item :labelStyle="descLabelStyle" label="计划编号">
              {{ form.gbsGood ? form.gbsGood.pdName : '' }}
            </el-descriptions-item>
            <el-descriptions-item :labelStyle="descLabelStyle" label="成品编号">
              {{ form.schedulePdCode }}
            </el-descriptions-item>
            <el-descriptions-item :labelStyle="descLabelStyle" label="规格类型">
              {{ form.gbsGood ? form.gbsGood.pdSpecType : '' }}
            </el-descriptions-item>
            <el-descriptions-item :labelStyle="descLabelStyle" label="产品类型">
              <dict-tag :options="getGbsGoodType" :value="form.gbsGood ? form.gbsGood.pdGoodType : ''" />
            </el-descriptions-item>
            <el-descriptions-item :labelStyle="descLabelStyle" label="单位">
              {{ form.gbsGood && form.gbsGood.gbsGoodUnit ? form.gbsGood.gbsGoodUnit.guName : '' }}
            </el-descriptions-item>
            <el-descriptions-item :labelStyle="descLabelStyle" label="计划数量">
              {{ form.scheduleNum }}
            </el-descriptions-item>
            <el-descriptions-item :labelStyle="descLabelStyle" label="计划开工时间">
              {{ form.scheduleStart }}
            </el-descriptions-item>
            <el-descriptions-item :labelStyle="descLabelStyle" label="计划完工时间">
              {{ form.scheduleComplete }}
            </el-descriptions-item>
            <el-descriptions-item :labelStyle="descLabelStyle" label="需求日期">
              {{ form.scheduleRequire }}
            </el-descriptions-item>
            <el-descriptions-item :labelStyle="descLabelStyle" label="备注" :span="2">
              {{ form.scheduleDesc }}
            </el-descriptions-item>
          </el-descriptions>
        </el-tab-pane>
      </el-tabs>
    </div>

    <!--    关闭按钮-->
    <MyConfirmBtnGroup :after-cancel-open-page="backPage" />
  </div>
</template>

<script>
import MyConfirmBtnGroup from '@/components/MyConfirmBtnGroup/index.vue'
import { getWorkOrder } from '@/api/yyj/pro/workOrder'

export default {
  name: 'WorkOrderDetail',
  components: { MyConfirmBtnGroup },
  data() {
    return {
      backPage: '/pro/workOrder',
      form: {}
    }
  },
  created() {
    this.workOrderCode = this.$route.params.workOrderCode
    this.getDetail(this.workOrderCode)
  },
  methods: {
    async getDetail(workOrderCode) {
      const res = await getWorkOrder(workOrderCode)
      this.form = res.data
      // this.gbsBomMaterials = res.gbsBomMaterials
      // this.pbsProcedureRoutes = res.pbsProcedureRoutes
    }
  }
}
</script>

<style scoped lang="scss">
@import "@/assets/styles/yyj/detail";
</style>
